<template>
	<view style="background-color: #FFFFFF;width: 100%;"
		@click="jumpUrl(`/pages/user/shop/detail/detail?type=rush&goodsId=${ item.goodsId }`)">
		<view class="u-radius-8 commodity-card flex" style="width: 100%;">
			<view class="u-radius-10 commodity-img clear-flex u-m-r-14">
				<x-image :src="showImage(item.imgUrl, 'logo')"/>
			</view>
			<view class="flex-between flex-column" style="padding: 4rpx 0 4rpx 20rpx; height: 194rpx; width: 100%;">
				<view class="u-f-28 u-lh-40 font-medio linecamp-2">{{ item.title || '' }}</view>

				<view class="u-f-26 u-lh-36 flex-between flex-column" style="height: 112rpx;">
					<view class="u-p-t-14 flex-center-between">
						<template v-if="rushType === 'rushing'">
							<template v-if="sellPercent < 100">
								<x-line-progress :show-text="true" :text="percentText" :percent="sellPercent"></x-line-progress>
								<view class="u-m-l-14 clear-flex">{{ lang_goods.hasGoods[0] }}: {{ hasCount }}{{ lang_goods.hasGoods[1] }}</view>
							</template>
							<template v-else>{{ lang_goods.soldOut }}</template>
						</template>
						<template v-else>{{ lang_goods.limtGoods[0] }}: {{ hasCount }}{{ lang_goods.limtGoods[1] }}</template>
					</view>

					<view class="flex-center-between u-m-t-14 font-bold">
						<view class="flex-center-between">
							<view class="flex-baseline">
								<view class="flex-baseline u-lh-38" style="color: #FC2642;">
									<view class="u-f-32">{{ lang_unit.money }}</view>
									<view class="u-f-44">{{ item.discountPrice || 0 }}</view>
								</view>

								<view
								v-if="item.allowIntegral"
								class="flex u-m-l-12 u-f-24 u-lh-28"
								style="color: #B46617;"
								>
									<view class="font-bold">{{ item.integral || 0 }}{{ lang_common.score }}</view>
								</view>
							</view>
						</view>

						<view style="width: 124rpx; height: 50rpx;">
							<x-common-btn v-if="rushType === 'rushing'" width="124" height="50"
								:background="sellPercent < 100 ? 'linear-gradient(to right, #F94404 0%, #FD164F 100%)' : '#C4C4C4'">
								{{ lang_common.buy }}</x-common-btn>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				default: () => ({})
			},
			rushType: {
				default: 'rushing'
			}
		},
		data() {
			return {

			}
		},
		computed: {
			hasCount() {
				let {
					stock
				} = this.item
				return (stock || 0)
			},
			sellCount() {
				let {
					sellCount
				} = this.item
				return (sellCount || 0)
			},
			sellPercent() {
				return Number(((this.sellCount / ((this.hasCount || 1) + this.sellCount)) * 100).toFixed(2))
			},
			percentText() {
				let p = this.sellPercent
				let text = `还剩${ this.item.stock || 0 }件`
				if (p <= 10) {
					text = '新开抢中'
				} else if (p >= 90 && p < 100) {
					text = '即将售罄'
				} else if (p === 100) {
					text = '已售罄'
				}
				return text
			}
		}
	}
</script>

<style scoped lang="scss">
	.commodity {
		&-card {
			padding: 16rpx 14rpx 18rpx 14rpx;
			border-radius: 8rpx;
		}

		&-img {
			width: 180rpx;
			height: 180rpx;
			border-radius: 10rpx;
			overflow: hidden;
			background-color: #f9f9f9;
		}
	}
</style>
